<template>
  <view class='process'>
    <view class="process_ul">
      <view
        class="process_li"
        v-for="(item) in getData"
        :key="item.id"
      >
        <view class="title_box">
          <view class="title">{{item.title}}</view>

          <icon
            v-if="item.flag"
            class="icon"
            size='12'
            type='success'
          />
          <view v-else class="icon_time"></view>

        </view>
        <view
          class="text_ul"
          v-for="oItem in item.obj"
          :key="oItem"
        >
          <view
            class="text_li"
            v-show="oItem.text1?true:false"
          >
            <view class="text">{{oItem.text1}}</view>
            <view
              class="state"
              :style="item.flag?{color:'#41abff'}:{color:'red'}"
            >{{item.flag?'已办理':'未办理'}}</view>
          </view>

          <view
            class="text_li"
            v-show="oItem.text2?true:false"
          >
            <view class="text">{{oItem.text2}}</view>
            <view
              class="state"
              v-if="!oItem.price?true:false"
            >
              <view
                class="state"
                v-show="!item.flag"
                :style="item.flag?{color:'#41abff'}:{color:'red'}"
              >{{item.flag?'已办理':'未办理'}}</view>
              <view
                v-show="item.flag"
                class="state"
                :style="item.flag?{color:'#41abff'}:{color:'red'}"
              >{{item.flag?'已办理':'未办理'}}</view>
            </view>
            <view
              class="state"
              style="color:#41abff"
              v-else
            >{{oItem.price}}.00</view>
          </view>

          <view
            class="text_li"
            v-show="oItem.text3?true:false"
          >
            <view class="text">{{oItem.text3}}</view>
            <view
              class="state"
              :style="item.flag?{color:'#41abff'}:{color:'red'}"
            >{{item.flag?'已办理':'未办理'}}</view>
          </view>

          <view
            class="text_li"
            v-show="oItem.text4?true:false"
          >
            <view class="text">{{oItem.text4}}</view>
            <view
              class="state"
              :style="item.flag?{color:'#41abff'}:{color:'red'}"
            >{{item.flag?'已办理':'未办理'}}</view>
          </view>

          <view
            class="text_li"
            v-show="oItem.text5?true:false"
          >
            <view class="text">{{oItem.text5}}</view>
            <view
              class="state"
              :style="item.flag?{color:'#41abff'}:{color:'red'}"
            >{{item.flag?'已办理':'未办理'}}</view>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="footer">
      完成所有离院事项,仅代表北京info中深圳地区已办理完成。其余离校事项，请按照离校系统说明办理完毕后方可领取毕业证书。
    </view>
  </view>
</template>
<script>
import './liyuanliucheng.less'
export default {
  data() {
    return {
      getData: [
        { id: 1, flag: true, title: '导师', obj: [{ text1: '科研工作交接', text2: '归还实验用品', flag1: true, flag2: true }] },
        { id: 2, flag: true, title: '班主任', obj: [{ text1: '班主任工作交接', flag1: true }] },
        { id: 3, flag: true, title: '财务版', obj: [{ text1: '学杂费交清', text2: '住宿费', flag1: true, price: 1500 }] },
        { id: 4, flag: true, title: '校园服务中心', obj: [{ text1: '验收资产', text2: '房源退宿', flag1: false, flag2: true }] },
        { id: 5, flag: false, title: '大学生图书馆', obj: [{ text1: '结清所借图书和欠费', text2: '提交电子论文', flag1: false, flag2: true }] },
        { id: 6, flag: false, title: '网络中心', obj: [{ text1: '网络注销', flag1: true }] },
        { id: 7, flag: false, title: '总务办', obj: [{ text1: '归还和撤销门禁卡', flag1: true }] },
        { id: 8, flag: false, title: '学工办', obj: [{ text1: '户口迁移', text2: '学生档案迁出', flag1: false, flag2: true, text3: '党组织转移迁出', text4: '团组织转移迁出', text5: '院友及就业业务相关', flag3: true, flag4: true, flag5: true }] },
        { id: 9, flag: false, title: '培养出与学位办', obj: [{ text1: '填写调查问卷', text2: '提交电子论文', flag1: true, flag2: true }] },
        { id: 10, flag: false, title: '培养处', obj: [{ text1: '离院审核', flag1: true }] },

      ]
    }
  }
}
</script>
<style>
</style>